<template>
    <div class="Basin-root">
        <div class="header">
            <img class="headimg" src="@/assets/imgNew/ding2.png" alt="" @click="goHome">
            <span class="BasiName" @click="goHome">
                {{ value }}流域
            </span>
            <span v-show="$store.getters.basinShow" class="change m-l-5 basiNaSele" @click="showCon = !showCon">切换<i
                    class="basiNaSelei"></i></span>
        </div>

        <div v-if="showCon" ref="showContent" class="Basin-content">
            <div v-for="item in options" :key="item.wsnm" class="row" :class="ponit == item.wswscd ? 'active' : ''"
                @click="changeBasin(item.wswscd)"> {{ item.wsnm }}
            </div>
        </div>
    </div>
</template>

<script>

import { GetBasinList } from '@/api/xuna.js'
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'

export default {
    name: 'BasinChange',
    mixins: [],
    data() {
        return {
            ponit: undefined,
            showCon: false,
            showContent: null,
            options: [],
            value: '大席水',
            floleft: '19.5%'
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        },
        isbasinName() {
            return this.$store.getters.basinName
        },
        leftFold() {
            return this.$store.getters.leftFold
        },
        basinlist() {
            return this.$store.getters.basinlist
        }
    },
    watch: {
        showCon: {
            handler(newVal, olVal) {
                if (newVal) {
                    setTimeout(() => {
                        document.addEventListener('click', this.checkClick)
                    }, 0)
                } else {
                    document.removeEventListener('click', this.checkClick)
                }
            }
        },
        isbasinName: {
            handler(newVal) {
                this.value = newVal
            }
        },
        // leftFold 左边是否展开
        leftFold: {
            immediate: true,
            handler: function (val, oldVal) {
                this.floleft = val ? '19.5%' : '1.5%'
            }
        }
    },
    created() {
        this.options = this.basinlist;
        this.GetBasinListFun()
        this.value = this.$store.getters.basinName ? this.$store.getters.basinName : this.value
        this.$store.dispatch('basinName', this.value)
        var _this = this;
        window.UE_GetBasin = function () {
            var basin = _this.basin;
            var param = {
                "basin": basin
            }
            callUIInteraction("Web_SetBasin", param);//
            var width = document.body.clientWidth;
            var height = document.body.clientHeight;
            var param = {
                "previewCode": width + 'x' + height// 分辨率
            }
            callUIInteraction("Web_Resolution", param);
        }
        window.UE_GetBasin();
    },

    methods: {
        goHome() {
            this.$eventBus.$emit('goHome')
        },
        changeBasin(e) {
            this.ponit = e
            this.value = this.options.find(item => {
                return item.wswscd === e
            }).wsnm
            this.$store.dispatch('basin', e)
            this.$store.dispatch('basinName', this.value)
            var param = {
                "basin": e
            }
            callUIInteraction("Web_SetBasin", param);//
        },
        // 获取流域
        GetBasinListFun() {
            // this.value = res.data[0].wsnm
            // this.$store.dispatch('basin', res.data[0].wswscd)
            // GetBasinList().then((res) => {
            //     console.log(res)
            //     this.options = res.data
            //     this.value = res.data[0].wsnm
            //     this.$store.dispatch('basin', res.data[0].wswscd)
            // })
        },
        checkClick(event) {
            const dom = this.$refs.showContent // 这里是你的下拉菜单元素
            // console.log(dom)
            // console.log(dom.contains(event.target))
            if (!dom.contains(event.target)) {
                // 不在菜单范围，隐藏即可
                if (this.showCon) {
                    this.showCon = false
                    document.removeEventListener('click', this.checkClick)
                }
            }
        }

    },
    unmounted() {
        document.removeEventListener('click', this.checkClick)
    }
}
</script>

<style scoped lang="scss">
.Basin-root {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 99;
    width: calc(22% - 40px);
    border-bottom: solid 1px #00BAFF;
    padding-bottom: 5px;

    .header {
        display: flex;
        align-items: center;

        .headimg {
            height: 28px;
        }

        img {
            height: 44px;
            // margin-bottom: -5px;
            cursor: pointer;
        }

        .BasiName {
            display: inline-block;
            height: 36px;
            line-height: 36px;
            width: 70%;
            padding-left: 10px;
            margin-left: 5px;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            font-family: 'MSTIFFHEIPRC';
            cursor: pointer;
            background: url("~@/assets/imgNew/ding1.png") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;

        }

        .change {
            cursor: pointer;
            font-size: 14px;

            &:hover {
                text-decoration: none;
            }
        }

        .basiNaSele {
            display: inline-block;
            width: 80px;
            height: 24px;
            background: rgba(0, 102, 255, 0.6);
            border: 1px solid #00D2FF;
            color: #fff;
            font-weight: 400;
            text-align: center;
            line-height: 24px;
        }

        .basiNaSelei {
            display: inline-block;
            width: 12px;
            height: 8px;
            background: url("~@/assets/imgNew/ding3.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 5px;
        }
    }

    .Basin-content {
        position: absolute;
        right: 0;
        width: auto;
        //min-width:77px;
        min-width: 85px;
        //padding: 5px;
        //background: rgba(3, 40, 70, 0.76);
        background: rgba(0, 102, 255, 0.6);
        border: 1px solid #00D2FF;
        border-radius: 4px;
        box-sizing: content-box;

        .row {
            font-size: 12px;
            padding: 5px;
            cursor: pointer;
            text-align: center;

            &:hover {
                //background: rgba(14, 81, 133, 0.61);
                //box-shadow: rgb(11, 234, 235) 0px 0px 8px inset;
                background: rgba(0, 44, 111, 0.7);
                border-radius: 4px;
            }
        }

        .active {
            background: rgba(0, 44, 111, 0.7);
            border-radius: 4px;
        }
    }
}

.isShowtopflg {
    .Basin-root {
        top: 10px;
    }
}
</style>
